<template>
  <div class="list">
    <div class="swiper-box">
      <swiper class="box-container" :options="swiperOption" ref="mySwiper">
        <swiper-slide
          @touchmove.native="stopPlay"
          @touchend.native="play"
        >
          <!-- 自定义组件要加上.native -->
          <img  src="../images/banner1.jpg" alt=""/>
        </swiper-slide>
        <swiper-slide
          @touchmove.native="stopPlay"
          @touchend.native="play"
        >
          <!-- 自定义组件要加上.native -->
          <img  src="../images/banner2.jpg" alt=""/>
        </swiper-slide>
        <swiper-slide
          @touchmove.native="stopPlay"
          @touchend.native="play"
        >
          <!-- 自定义组件要加上.native -->
          <img  src="../images/banner3.jpg" alt=""/>
        </swiper-slide>

        <div class="swiper-pagination" slot="pagination"></div>
        <!-- <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        <div class="swiper-button-next swiper-button-white" slot="button-next"></div> -->
        <div class="swiper-scrollbar" slot="scrollbar"></div>
      </swiper>
    </div>
    <ul class="navlist">
      <li>
        <a href="###">
          <span class="icon_y"></span>
          <strong>一元购</strong>
        </a>
      </li>
      <li>
        <a href="###">
          <span class="icon_q"></span>
          <strong>抢购</strong>
        </a>
      </li>
      <li>
        <a href="###">
          <span class="icon_g"></span>
          <strong>性运盒子</strong>
        </a>
      </li>
      <li>
        <a href="###">
          <span class="icon_x"></span>
          <strong>新品</strong>
        </a>
      </li>
      <li>
        <a href="###">
          <span class="icon_b"></span>
          <strong>Blive</strong>
        </a>
      </li>
    </ul>
    <div class="picbox">
      <div class="picbox1">
        <a href="###">
          <img src="../images/img_14903446233316.jpg" alt />
        </a>
        <a href="###">
          <img src="../images/img_14903449509608.jpg" alt />
        </a>
      </div>
      <div class="picbox2">
        <a href="###">
          <img src="../images/img_14903450521043.jpg" alt />
        </a>
      </div>
      <div class="picbox1">
        <a href="###">
          <img src="../images/img_14903452356129.jpg" alt />
        </a>
        <a href="###">
          <img src="../images/img_14903452881809.jpg" alt />
        </a>
      </div>
      <div class="picbox2">
        <a href="###">
          <img src="../images/img_14903453702593.jpg" alt />
        </a>
      </div>
      <div class="picbox1">
        <a href="###">
          <img src="../images/img_14903452356129.jpg" alt />
        </a>
        <a href="###">
          <img src="../images/img_14903452881809.jpg" alt />
        </a>
      </div>
    </div>
    <div class="sell">
      <div class="top_title">TOP热卖</div>
      <div class="overf">
        <ul class="selllist">
          <li>
            <a href="###">
              <img src="../images/img_15469317465458.jpg" alt />
              <h3>女式吊带袜透明蕾丝睡裙马甲制服诱惑睡衣性感情趣内衣</h3>
              <p>￥49</p>
            </a>
          </li>
          <li>
            <a href="###">
              <img src="../images/img_15469317465458.jpg" alt />
              <h3>SECWELL怡然国际 可儿2代飞机杯智能7国美女发音电动男用自慰倒模名器</h3>
              <p>￥199</p>
            </a>
          </li>
          <li>
            <a href="###">
              <img src="../images/img_15469317465458.jpg" alt />
              <h3>SECWELL怡然国际 可儿2代飞机杯智能7国美女发音电动男用自慰倒模名器</h3>
              <p>￥199</p>
            </a>
          </li>
          <li>
            <a href="###">
              <img src="../images/img_15469317465458.jpg" alt />
              <h3>SECWELL怡然国际 可儿2代飞机杯智能7国美女发音电动男用自慰倒模名器</h3>
              <p>￥199</p>
            </a>
          </li>
          <li>
            <a href="###">
              <img src="../images/img_15469317465458.jpg" alt />
              <h3>SECWELL怡然国际 可儿2代飞机杯智能7国美女发音电动男用自慰倒模名器</h3>
              <p>￥199</p>
            </a>
          </li>
          <li>
            <a href="###">
              <img src="../images/img_15469317465458.jpg" alt />
              <h3>SECWELL怡然国际 可儿2代飞机杯智能7国美女发音电动男用自慰倒模名器</h3>
              <p>￥199</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import "../js/rem";
import { swiper, swiperSlide } from "vue-awesome-swiper";
// import "../node_modules/swiper/css/swiper.min.css";
import "../css/swiper.min.css";
export default {
  components: {
    swiper,
    swiperSlide
  },
  data: function() {
    return {
     
      swiperOption: {
        notNextTick: true,
        autoplay: {
          // 自动播放
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        loop: true, // 循环
        directionType: "horizontal", // 方向
        pagination: {
          // 分页器
          el: ".swiper-pagination",
          type: "bullets",
          clickable: true
        },
        navigation: {
          // 左右按钮
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        observer: true, // 启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
        observeParents: true, // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
        setWrapperSize: true // Swiper使用flexbox布局(display: flex)，
        // 开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
      }
    };
  },
  computed: {
    mySwiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    stopPlay() {
      this.mySwiper.autoplay.stop(); // 当手指触摸时停止自动播放
    },
    play() {
      this.mySwiper.autoplay.start(); // 当手指离开时开始自动播放
    }
  }
};
</script>

<style scoped lang="scss">
.list {
  .swiper-box {
    // height: 7.573333rem;
    .box-container {


        img {
          height: 7.573333rem;
          width: 10rem;
        }
      
    }
  }
  .navlist {
    margin: 0.133333rem 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    a {
      text-align: center;
      span {
        display: block;
        width: 0.666667rem;
        height: 0.666667rem;
        background: url(../images/i2.png) no-repeat;
        background-size: 300%;
        margin: auto;
        margin-bottom: .08rem;
      }
      strong {
        font-size: 0.373333rem;
        line-height: 0.4rem;
        color: #666;
        font-weight: 400;
      }
    }
    .icon_y {
      background-position: -1.333333rem -0.666667rem;
    }
    .icon_q {
      background-position: -.666667rem -1.333333rem;
    }
    .icon_g {
      background-position: 0 -1.333333rem;
    }
    .icon_x {
      background-position: 0 -0.666667rem;
    }
    .icon_b {
      background-position: -0.666667rem -0.666667rem;
    }
  }
  .picbox {
    .picbox1 {
      img {
        width: 50%;
      }
    }
    .picbox2 {
      img {
        width: 100%;
      }
    }
  }
  .sell {
    // overflow: auto;
    .top_title {
      font-size: 0.426667rem;
      text-align: center;
      padding: .4rem 0;
    }
    .top_title:before,
    .top_title:after {
      border-top: .026667rem solid #333;
      content: "";
      display: inline-block;
      width: 15%;
      margin: 0 .4rem .133333rem;
    }
    .overf {
      overflow: auto;
      .selllist {
        display: flex;
        justify-content: flex-start;
        // width: 100%;
        overflow: auto;
        li {
          a {
            display: inline-block;
            color: #333;
            font-size: 0.373333rem;
            line-height: 0.52rem;
            img {
              width: 4rem;
              height: 4rem;
            }
          }
        }
      }
    }
  }
}
</style>